<div class="card mb-4">
    <div class="card-body position-sticky" style="top: 3.9rem; z-index: 12">
        <h6 class="m-0">
            Entities
            <span ng-bind="$ctrl.title"></span>
            <a data-bs-toggle="collapse" href=".mix-database-entity" role="button" aria-expanded="false"
                aria-controls="mix-database-entity" class="btn btn-link text-primary btn-sm float-end py-0"><span
                    class="fas fa-minus-square"></span> Show / Hide data</a>
            <a ng-click="$ctrl.addAttr()" class="btn btn-link text-primary btn-sm float-end py-0"><span
                    class="fas fa-plus"></span> Create column</a>
        </h6>
    </div>
    <div class="card-body mix-database-entity">
        <div class="alert alert-warning mb-0" role="alert" ng-if="!$ctrl.columns || !$ctrl.columns.length">
            <i class="fas fa-exclamation-triangle text-warning me-3"></i> No column
            has been created for this table yet!
        </div>


        <ul class="list-group" dnd-list="$ctrl.columns" dnd-inserted="$ctrl.updateOrders(index)"
            ng-if="$ctrl.columns.length">
            <li class="list-group-item m-0" ng-repeat="col in $ctrl.columns track by $index" dnd-draggable="col"
                dnd-type="'col'" dnd-effect-allowed="copyMove" dnd-selected="$ctrl.selectedCol = col"
                dnd-dragstart="$ctrl.dragStart($index)" ng-class="{'selected': $ctrl.selectedCol === col}">
                <div class="d-flex">
                    <div class="me-3">
                        <!-- <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                            style="cursor: grab"></small> -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-drag-drop-2"
                            style="cursor: grab" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <rect x="8" y="8" width="12" height="12" rx="2" />
                            <line x1="4" y1="4" x2="4" y2="4.01" />
                            <line x1="8" y1="4" x2="8" y2="4.01" />
                            <line x1="12" y1="4" x2="12" y2="4.01" />
                            <line x1="16" y1="4" x2="16" y2="4.01" />
                            <line x1="4" y1="8" x2="4" y2="8.01" />
                            <line x1="4" y1="12" x2="4" y2="12.01" />
                            <line x1="4" y1="16" x2="4" y2="16.01" />
                        </svg>
                    </div>
                    <div class="me-3">
                        <!-- <small class="form-label">Column title: </small> -->
                        <input ng-model="col.title" placeholder="Display name..." ng-blur="$ctrl.generateName(col)"
                            class="form-control form-control-sm" />
                    </div>
                    <div class="me-3">
                        <!-- <small class="form-label">Column name: </small> -->
                        <!-- <span class="text-black-50" ng-bind="col.name"></span> -->
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-sm text-black-50" ng-model="col.name" />
                            <button class="btn btn-outline-secondary" type="button"
                                ng-click="$ctrl.generateName(col,true)">
                                <span class="fa fa-redo"></span>
                            </button>
                        </div>
                    </div>
                    <div class="me-3">
                        <!-- <small class="form-label">Type {{col.dataType}}</small> -->
                        <mix-select model="col.dataType" options="$ctrl.localizeSettings.dataTypes"
                            callback="$ctrl.changeDataType(type)"></mix-select>
                    </div>
                    <div class="flex-fill me-3">
                        <div class="" ng-if="col.dataType != 'Reference'">
                            <input ng-model="col.defaultValue" placeholder="Default Value"
                                class="form-control form-control-sm" />
                            <!-- <mix-value-editor string-value="col.defaultValue" type="col.dataType">
                            </mix-value-editor> -->
                        </div>
                        <div ng-if="col.dataType == 'Reference'" class="btn-group">
                            <a ng-click="$ctrl.showReferences(col)" class="btn-link me-3">
                                <span class="fas fa-link"></span>
                                Link
                            </a>
                            <a ng-if="col.referenceId" href="/portal/mix-database/details/{{col.referenceId}}"
                                class="btn-link" target="_blank">
                                <span class="fas fa-pen"></span> Config {{col.reference.title}}
                            </a>
                        </div>
                    </div>
                    <div class="btn-group btn-group-sm float-end">
                        <a href="" class="btn btn-outline-danger" ng-click="$ctrl.removeAttribute(col, $index)">
                            <span class="fas fa-trash-alt"></span>
                        </a>
                        <!-- <a href="" class="btn btn-outline-secondary" ng-click="col.showAdvanced = !col.showAdvanced">
                            <span ng-if="!col.showAdvanced" class="mi mi-ChevronRightSmall"></span>
                            <span ng-if="col.showAdvanced" class="mi mi-ChevronDownSmall"></span>
                            
                        </a> -->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#advance-{{$index}}">
                            <svg class="svg-inline--fa fa-tools fa-w-16" aria-hidden="true" focusable="false"
                                data-prefix="fas" data-icon="tools" role="img" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512" data-fa-i2svg="">
                                <path fill="currentColor"
                                    d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z">
                                </path>
                            </svg>
                        </button>
                    </div>
                    <div class="modal fade" id="advance-{{$index}}" tabindex="-1"
                        aria-labelledby="advance-{{$index}}-Label" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                            <div class="modal-content">
                                <!-- <div class="modal-header">
                                    <h5 class="modal-title h4" id="advance-{{$index}}-Label" ng-model="col.title">Entity Settings</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div> -->
                                <div class="modal-body">
                                    <tabs-v>
                                        <pane-v icon="" header="General" class="p-0">
                                            <div class="mb-3">
                                                <div class="form-check form-switch">
                                                    <input type="checkbox" class="form-check-input"
                                                        ng-model="col.isUnique" id="{{'unique_' + $index}}" />
                                                    <label class="form-check-label" for="{{'unique_' + $index}}">
                                                        Unique
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch col">
                                                    <input type="checkbox" class="form-check-input"
                                                        ng-model="col.isEncrypt" id="{{'isEncrypt_' + $index}}" />
                                                    <label class="form-check-label" for="{{'isEncrypt_' + $index}}">
                                                        Encrypt value
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch col">
                                                    <input type="checkbox" class="form-check-input"
                                                        ng-model="col.isRequire" id="{{'required_' + $index}}" />
                                                    <label class="form-check-label" for="{{'required_' + $index}}">
                                                        Mandatory
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class=" mb-3">
                                                    <label class="form-label">
                                                        Max Length
                                                    </label>
                                                    <input type="number" class="form-control form-inline"
                                                        ng-model="col.columnConfigurations.maxLength" />
                                                </div>
                                                <div class=" mb-3">
                                                    <label class="form-label">
                                                        Options Configuration Name
                                                    </label>
                                                    <input type="text" class="form-control form-inline"
                                                        ng-model="col.columnConfigurations.optionsConfigurationName" />
                                                </div>
                                                <div class=" mb-3">
                                                    <label class="form-label">
                                                        Belong To
                                                    </label>
                                                    <input type="text" class="form-control form-inline"
                                                        ng-model="col.columnConfigurations.belongTo" />
                                                </div>

                                            </div>
                                        </pane-v>
                                        <pane-v icon="" header="Default values" class="p-0">
                                            <div class="mb-3">
                                                <div class="form-check form-switch">
                                                    <input type="checkbox" class="form-check-input"
                                                        ng-model="col.isSelect" id="{{'select_' + $index}}" />
                                                    <label class="form-check-label" for="{{'select_' + $index}}">
                                                        Default values
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div ng-show="col.isSelect">
                                                    <div class="row my-2">
                                                        <div class="">
                                                            <div class="input-group mb-3">
                                                                <span class="input-group-text">Input option value</span>
                                                                <input type="text" class="form-control form-control-sm"
                                                                    id="option_{{$index}}"
                                                                    ng-enter="$ctrl.addOption(col,$index)"
                                                                    placeholder="Please type in the value then enter to add to option list..." />
                                                            </div>

                                                            <div class="row my-2 ms-2"
                                                                ng-repeat="opt in col.options track by $index">
                                                                <div class="col-md pl-4">
                                                                    <input type="text"
                                                                        class="form-control form-control-sm"
                                                                        ng-model="col.options[$index].value" />
                                                                </div>
                                                                <div style="width: 5%">
                                                                    <a class="btn btn-sm"
                                                                        ng-click="col.options.splice($index,1)">
                                                                        <span class="fas fa-times text-danger"></span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </pane-v>
                                        <pane-v icon="" header="Validations" class="p-0">
                                            <div class="mb-3">
                                                <div class="form-check form-switch col">
                                                    <input type="checkbox" class="form-check-input"
                                                        ng-model="col.isRegex" id="{{'regex_' + $index}}" />
                                                    <label class="form-check-label" for="{{'regex_' + $index}}">
                                                        Validation
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="row mb-2" ng-show="col.isRegex">
                                                    <div class="col">
                                                        <div class="input-group">
                                                            <span class="input-group-text">Regular Expression</span>
                                                            <input type="text" class="col form-control"
                                                                ng-model="col.regex" placeholder="(^\d{1,10}$)" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </pane-v>
                                        <pane-v icon="" header="Image Properties" class="p-0">
                                            <div class="mb-3" ng-show="col.dataType == 'Upload'">
                                                <div class="col-md-12 mb-3"
                                                    ng-if="col.columnConfigurations.upload.arrayAccepts">
                                                    <label class="form-label">Accept file formats</label>
                                                    <tags-input min-length="1"
                                                        ng-model="col.columnConfigurations.upload.arrayAccepts">
                                                    </tags-input>
                                                </div>
                                                <div class="form-check form-switch">
                                                    <input type="checkbox" class="form-check-input"
                                                        ng-model="col.columnConfigurations.upload.isCrop"
                                                        id="{{'isCrop_' + $index}}" />
                                                    <label class="custom-form-label" for="{{'isCrop_' + $index}}">
                                                        Crop information
                                                    </label>
                                                </div>
                                                <div class="col-md-3" ng-if="col.columnConfigurations.upload.isCrop">
                                                    <small>Width</small>
                                                    <input type="number"
                                                        ng-model="col.columnConfigurations.upload.width"
                                                        class="form-control sm-control mb-3" />
                                                </div>
                                                <div class="col-md-3" ng-if="col.columnConfigurations.upload.isCrop">
                                                    <small>Height</small>
                                                    <input type="number"
                                                        ng-model="col.columnConfigurations.upload.height"
                                                        class="form-control sm-control" />
                                                </div>
                                            </div>
                                            <div class="" ng-show="col.dataType != 'Upload'">
                                                <label>For "Upload" entity type only.</label>
                                            </div>
                                        </pane-v>
                                    </tabs-v>


                                    <div class="ms-auto">
                                        <!-- <div class="row">
                                            <div class="col-md form-check-inline px-2">
                                                <div class="form-check form-switch mx-2 float-start">
                                                    <input type="checkbox" class="form-check-input" ng-model="col.isEncrypt"
                                                        id="{{'isEncrypt_' + $index}}" />
                                                    <label class="form-check-label" for="{{'isEncrypt_' + $index}}">
                                                        Encrypt value
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch mx-2 float-start">
                                                    <input type="checkbox" class="form-check-input" ng-model="col.isUnique"
                                                        id="{{'unique_' + $index}}" />
                                                    <label class="form-check-label" for="{{'unique_' + $index}}">
                                                        Unique
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch mx-2 float-start">
                                                    <input type="checkbox" class="form-check-input" ng-model="col.isRequire"
                                                        id="{{'required_' + $index}}" />
                                                    <label class="form-check-label" for="{{'required_' + $index}}">
                                                        Mandatory
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch mx-2 float-start">
                                                    <input type="checkbox" class="form-check-input" ng-model="col.isSelect"
                                                        id="{{'select_' + $index}}" />
                                                    <label class="form-check-label" for="{{'select_' + $index}}">
                                                        Default values
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch mx-2 float-start">
                                                    <input type="checkbox" class="form-check-input" ng-model="col.isRegex"
                                                        id="{{'regex_' + $index}}" />
                                                    <label class="form-check-label" for="{{'regex_' + $index}}">
                                                        Validation
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="float-start">
                                                <label class="form-label">
                                                    Max Length
                                                </label>
                                                <input type="number" class="form-control form-inline"
                                                    ng-model="col.columnConfigurations.maxLength" />
                                            </div>
                                            <div class="float-start">
                                                <label class="form-label">
                                                    Options Configuration Name
                                                </label>
                                                <input type="text" class="form-control form-inline"
                                                    ng-model="col.columnConfigurations.optionsConfigurationName" />
                                            </div>
                                            <div class="float-start">
                                                <label class="form-label">
                                                    Belong To
                                                </label>
                                                <input type="text" class="form-control form-inline"
                                                    ng-model="col.columnConfigurations.belongTo" />
                                            </div>
                    
                                        </div>
                                        <div class="row mb-3" ng-show="col.dataType == 'Upload'">
                                            <div class="col-md-12 mb-3" ng-if="col.columnConfigurations.upload.arrayAccepts">
                                                <label class="form-label">Accepts</label>
                                                <tags-input min-length="1" ng-model="col.columnConfigurations.upload.arrayAccepts">
                                                </tags-input>
                                            </div>
                                            <div class="form-check form-switch mx-2 float-start">
                                                <input type="checkbox" class="form-check-input"
                                                    ng-model="col.columnConfigurations.upload.isCrop" id="{{'isCrop_' + $index}}" />
                                                <label class="custom-form-label" for="{{'isCrop_' + $index}}">
                                                    Crop
                                                </label>
                                            </div>
                                            <div class="col-md-3" ng-if="col.columnConfigurations.upload.isCrop">
                                                <small>Width</small>
                                                <input type="number" ng-model="col.columnConfigurations.upload.width" class="sm-control" />
                                            </div>
                                            <div class="col-md-3" ng-if="col.columnConfigurations.upload.isCrop">
                                                <small>Height</small>
                                                <input type="number" ng-model="col.columnConfigurations.upload.height" class="sm-control" />
                                            </div>
                                        </div>-->
                                    </div>
                                    <div class="mix-database-entity">
                                        <!-- <div class="row mb-2" ng-show="col.isRegex">
                                            <div class="col-10">
                                                <div class="input-group">
                                                    <span class="input-group-text">Regular Expression</span>
                                                    <input type="text" class="col form-control form-control-sm" ng-model="col.regex"
                                                        placeholder="(^\d{1,10}$)" />
                                                </div>
                                            </div>
                                        </div>
                                        <div ng-show="col.isSelect">
                                            <div class="row my-2">
                                                <div class="col-10">
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text">Input option value</span>
                                                        <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                                                            ng-enter="$ctrl.addOption(col,$index)"
                                                            placeholder="Please type in the value then enter to add to option list..." />
                                                    </div>
                    
                                                    <div class="row my-2 ms-2" ng-repeat="opt in col.options track by $index">
                                                        <div class="col-md pl-4">
                                                            <input type="text" class="form-control form-control-sm"
                                                                ng-model="col.options[$index].value" />
                                                        </div>
                                                        <div style="width: 5%">
                                                            <a class="btn btn-sm" ng-click="col.options.splice($index,1)">
                                                                <span class="fas fa-times text-danger"></span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 
                <div class="ms-auto" ng-show="col.showAdvanced">
                    <div class="row">
                        <div style="width: 5%"></div>
                        <div class="col-md form-check-inline px-2">
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isEncrypt"
                                    id="{{'isEncrypt_' + $index}}" />
                                <label class="form-check-label" for="{{'isEncrypt_' + $index}}">
                                    Encrypt
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isUnique"
                                    id="{{'unique_' + $index}}" />
                                <label class="form-check-label" for="{{'unique_' + $index}}">
                                    Unique
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isRequire"
                                    id="{{'required_' + $index}}" />
                                <label class="form-check-label" for="{{'required_' + $index}}">
                                    Mandatory
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isSelect"
                                    id="{{'select_' + $index}}" />
                                <label class="form-check-label" for="{{'select_' + $index}}">
                                    Default values
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isRegex"
                                    id="{{'regex_' + $index}}" />
                                <label class="form-check-label" for="{{'regex_' + $index}}">
                                    Validation
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 mx-2">
                        <div style="width: 5%"></div>
                        <div class="form-check form-switch mx-2 float-start">
                            <label class="form-label">
                                Max Length
                            </label>
                            <input type="number" class="form-control form-inline"
                                ng-model="col.columnConfigurations.maxLength" />
                        </div>
                        <div class="form-check form-switch mx-2 float-start">
                            <label class="form-label">
                                Options Configuration Name
                            </label>
                            <input type="text" class="form-control form-inline"
                                ng-model="col.columnConfigurations.optionsConfigurationName" />
                        </div>
                        <div class="form-check form-switch mx-2 float-start">
                            <label class="form-label">
                                Belong To
                            </label>
                            <input type="text" class="form-control form-inline"
                                ng-model="col.columnConfigurations.belongTo" />
                        </div>

                    </div>
                    <div class="row mb-3" ng-show="col.dataType == 'Upload'">
                        <div class="col-md-12 mb-3" ng-if="col.columnConfigurations.upload.arrayAccepts">
                            <label class="form-label">Accepts</label>
                            <tags-input min-length="1" ng-model="col.columnConfigurations.upload.arrayAccepts">
                            </tags-input>
                        </div>
                        <div class="form-check form-switch mx-2 float-start">
                            <input type="checkbox" class="form-check-input"
                                ng-model="col.columnConfigurations.upload.isCrop" id="{{'isCrop_' + $index}}" />
                            <label class="custom-form-label" for="{{'isCrop_' + $index}}">
                                Crop
                            </label>
                        </div>
                        <div class="col-md-3" ng-if="col.columnConfigurations.upload.isCrop">
                            <small>Width</small>
                            <input type="number" ng-model="col.columnConfigurations.upload.width" class="sm-control" />
                        </div>
                        <div class="col-md-3" ng-if="col.columnConfigurations.upload.isCrop">
                            <small>Height</small>
                            <input type="number" ng-model="col.columnConfigurations.upload.height" class="sm-control" />
                        </div>
                    </div>
                </div>
                <div class="mix-database-entity">
                    <div class="row mb-2" ng-show="col.isRegex && col.showAdvanced">
                        <div style="width: 5%"></div>
                        <div class="col-10">
                            <div class="input-group">
                                <span class="input-group-text">Regular Expression</span>
                                <input type="text" class="col form-control form-control-sm" ng-model="col.regex"
                                    placeholder="(^\d{1,10}$)" />
                            </div>
                        </div>
                    </div>
                    <div ng-show="col.isSelect">
                        <div class="row my-2">
                            <div style="width: 5%"></div>
                            <div class="col-10">
                                <div class="input-group mb-3">
                                    <span class="input-group-text">Input option value</span>
                                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                                        ng-enter="$ctrl.addOption(col,$index)"
                                        placeholder="Please type in the value then enter to add to option list..." />
                                </div>

                                <div class="row my-2 ms-2" ng-repeat="opt in col.options track by $index">
                                    <div class="col-md pl-4">
                                        <input type="text" class="form-control form-control-sm"
                                            ng-model="col.options[$index].value" />
                                    </div>
                                    <div style="width: 5%">
                                        <a class="btn btn-sm" ng-click="col.options.splice($index,1)">
                                            <span class="fas fa-times text-danger"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </li>
        </ul>

        <div ng-show="col.isSelect">
            <div class="row">
                <label class="col-sm-3 col-form-label">Title</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                        ng-enter="$ctrl.addOption(col,$index)" placeholder="fill then enter to add options" />
                </div>
            </div>
            <div class="row" ng-repeat="opt in col.options track by $index">
                <div class="col-md-10 row">
                    <input type="text" class="col-7 form-control form-control-sm"
                        ng-model="col.options[$index].value" />
                    <select class="col-5 form-control form-control-sm" ng-model="col.options[$index].dataType">
                        <option ng-repeat="item in $ctrl.localizeSettings.dataTypes track by $index"
                            ng-value="item.value">
                            {{item.name}}
                        </option>
                    </select>

                    <hr />
                </div>
            </div>
        </div>
    </div>

    <modal-navs model-name="'mix-database'" is-global="'true'" view-type="'read'" selects="'id,title,createdDateTime'"
        is-single="'true'" save="$ctrl.referenceCallback(selected)"></modal-navs>
</div>